<style>

</style>
<div class="layui-layout order-wrapper" style="padding:0 20px;">
    <div id="search-wrapper">
        <div class="layui-form">
            <div class="layui-row">
                <div class="layui-inline">
                    <input class="layui-input userId" name="userId" placeholder="请输入用户Id">
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-default search" data-type="reload">搜索</button>
                </div>
                <div class="layui-inline fr">
                    <button class="layui-btn layui-btn-normal export">导出</button>
                </div>
            </div>
        </div>
    </div>
    <table class="layui-hide" id="table_list" lay-filter="table_filter">
    </table>
</div>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var $ = layui.$;
        //方法级渲染
        table.render({
            elem: '#table_list'
            ,url: '/account/table'
            ,cols: [[
                {field:'sort', title: '序号', align:'center',width:'100'},
                {field:'userId', title: '用户Id', align:'center',width:'120'},
                {field:'nickname', title: '用户名', align:'center',width:'150'},
                {field:'date', title: '发生时间', align:'center',width:'250',sort:true},
                {field:'type', title: '发生事由', align:'center',width:'150',templet:function (d) {
                        if (d.type == 1){
                            return "消费"
                        }else if (d.type == 2){
                            return "充值"
                        }else if (d.type == 3){
                            return "兑换"
                        }else if (d.type == 4){
                            return "赠送"
                        }else if (d.type == 5){
                            return "签到"
                        }
                    }},
                {field:'vip', title: 'Vip时长', align:'center',width:'120',templet:function (d) {
                        if (d.vip == 0){
                            return "-"
                        }else if (d.vip > 0){
                            return "+" + d.vip
                        }
                    }},
                {field:'coin', title: '书币', align:'center',width:'120',templet:function (d) {
                        if (d.coin == 0){
                            return "-"
                        }else if (d.coin > 0){
                            return "+" + d.coin
                        }else if (d.coin < 0){
                            return d.coin
                        }
                    }},
                {field:'gift', title: '书券', align:'center',width:'120',templet:function (d) {
                        if (d.gift == 0){
                            return "-"
                        }else if (d.gift > 0){
                            return "+" + d.gift
                        }else if (d.gift < 0){
                            return d.gift
                        }
                    }},
                {field:'recharge', title: '人民币', align:'center',width:'120',templet:function (d) {
                        if (d.recharge == 0){
                            return "-"
                        }else if (d.recharge < 0){
                            return "+" + Math.abs(d.recharge)/100
                        }
                    }},
                {field:'reason', title: '备注', align:'center',width:'400'}
            ]]
            ,id: 'listReload'
            ,page: {
                curr: location.hash.replace('#!fenye=', '') //获取起始页
                ,hash: 'fenye' //自定义hash值
            }
            ,height: "full-200"
        });

        var active = {
            reload: function(){
                table.reload('listReload', {
                    where: {
                        userId:$(".userId").val()
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        };


        $('#search-wrapper .search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $(".export").click(function(){
            var urlParam = "?page=1&limit=99999" + "&userId=" + $(".userId").val() + "&export=1";
            window.open('/account/table'+urlParam)
        });
    });

</script>